<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kilin0915 - Vue.js个人简介</title>
    <link rel="stylesheet" href="./src/style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- Vue挂载点 -->
    <div id="app">
        <!-- 主题切换按钮 -->
        <button class="theme-toggle" @click="toggleTheme">
            {{ themeButtonText }}
        </button>
        
        <!-- 头部 -->
        <header>
            <div class="container">
                <h1 class="my-name">kilin0915</h1>
                <p>前端学习者 | Vue.js 初学者</p>
                
                <!-- 学习时长追踪器 -->
                <div class="study-tracker">
                    <div class="study-progress">
                        <div class="progress-text">
                            <span>今日学习: </span>
                            <strong class="hours-count">{{ studyHours }}</strong>
                            <span>小时 / 目标: {{ studyGoal }}小时</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" 
                                 :style="{ width: (studyHours / studyGoal) * 100 + '%' }"
                                 :class="{ completed: studyHours >= studyGoal }">
                            </div>
                        </div>
                    </div>
                    
                    <div class="study-controls">
                        <button @click="addStudyHour" class="study-btn">
                            +1 小时
                        </button>
                        <button @click="resetStudyHours" class="reset-btn">
                            重置
                        </button>
                        <div class="goal-selector">
                            <span>目标: </span>
                            <select @change="setStudyGoal($event.target.value)">
                                <option value="4">4小时</option>
                                <option value="8" selected>8小时</option>
                                <option value="12">12小时</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <!-- 导航 -->
        <nav>
            <ul>
                <li v-for="navItem in navItems" :key="navItem.id">
                    <a :href="navItem.href" @click.prevent="scrollToSection(navItem.id)">
                        {{ navItem.text }}
                    </a>
                </li>
            </ul>
        </nav>

        <main>
            <!-- 关于我 -->
            <section id="about">
                <h2>关于我</h2>
                <p>我是一名正在积极学习前端开发的学生，对构建美观且交互丰富的网页充满热情。</p>
                <p>目前正在学习Vue.js框架，这个网站就是我学习Vue的第一个实践项目！</p>
            </section>

            <!-- 学习历史 -->
            <section id="study-history">
                <h2>📊 学习记录</h2>
                
                <div class="history-container">
                    <div class="stats-card">
                        <h3>今日统计</h3>
                        <div class="stat-item">
                            <span class="stat-label">总学习时长</span>
                            <span class="stat-value">{{ studyHours }}小时</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">目标进度</span>
                            <span class="stat-value">{{ Math.round((studyHours / studyGoal) * 100) }}%</span>
                        </div>
                        <div class="stat-item" v-if="studyHistory.length > 0">
                            <span class="stat-label">最后记录</span>
                            <span class="stat-value">{{ studyHistory[studyHistory.length - 1].date }}</span>
                        </div>
                    </div>
                    
                    <div class="history-list">
                        <h3>学习记录</h3>
                        <div v-if="studyHistory.length === 0" class="empty-state">
                            <p>还没有学习记录，开始学习吧！</p>
                        </div>
                        <div v-else>
                            <div v-for="(record, index) in studyHistory" 
                                 :key="index" 
                                 class="history-item">
                                <span class="time">{{ record.date }}</span>
                                <span class="action">+1小时学习</span>
                                <span class="type">{{ record.type }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 我的技能 -->
            <section id="skills">
                <h2>我的技能</h2>
                
                <div class="skills-container">
                    <!-- 技能筛选器 -->
                    <div class="skills-filter">
                        <button v-for="category in skillCategories" 
                                :key="category.id"
                                class="filter-btn" 
                                :class="{ active: activeCategory === category.id }"
                                @click="filterSkills(category.id)">
                            {{ category.name }}
                        </button>
                    </div>
                    
                    <!-- 技能搜索框 -->
                    <div class="search-box">
                        <input 
                            v-model="searchText" 
                            type="text" 
                            placeholder="🔍 搜索技能..." 
                            class="search-input"
                        >
                    </div>
                    
                    <!-- 技能排序 -->
                    <div class="sort-controls">
                        <label>排序方式：</label>
                        <select v-model="sortBy" class="sort-select">
                            <option value="level-desc">熟练度降序</option>
                            <option value="level-asc">熟练度升序</option>
                            <option value="name">按名称排序</option>
                        </select>
                    </div>
                    
                    <!-- 技能列表 -->
                    <div class="skills-list">
                        <div v-for="skill in filteredSkills" 
                             :key="skill.id"
                             class="skill-item"
                             :class="{ hidden: activeCategory !== 'all' && skill.category !== activeCategory }">
                            <div class="skill-info">
                                <span class="skill-name">{{ skill.name }}</span>
                                <span class="skill-percent">{{ skill.level }}%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" 
                                     :style="{ width: skill.level + '%' }"
                                     :data-level="skill.level">
                                </div>
                            </div>
                            <p class="skill-desc" v-if="skill.description">{{ skill.description }}</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 我的项目 -->
            <section id="projects">
                <h2>我的项目</h2>
                
                <div class="project-item" v-for="project in projects" :key="project.id">
                    <h3>{{ project.title }}</h3>
                    <p>{{ project.description }}</p>
                    <p><strong>技术栈：</strong> {{ project.techStack }}</p>
                </div>
            </section>
        </main>

        <footer>
            <p>© 2024 kilin0915 - 使用Vue.js构建</p>
        </footer>
    </div>

    <script type="module" src="./src/main.js"></script>
</body>
</html>